<template>
  <div id="channelSetList">
    <!--上部搜索条件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:contentCategoryTag:add'"
        type="warning"
        icon="el-icon-plus"
        @click="createTag('add')"
      >
        创建频道栏目
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <div
      v-loading="loading"
      class="box"
      v-for="(item, index) in tagsList"
      :key="index"
    >
      <el-card
        type="info"
        :class="item.status === true ? 'box-card-green' : 'box-card-red'"
        @click.native="handleLife(item.id, item.name)"
      >
        <h4>{{ item.name }}</h4>
        <p>{{ item.count }}</p>
      </el-card>
      <el-button
        :disabled="item.isEditShow"
        type="text"
        size="mini"
        @click="createTag('edit', item.id)"
        >编辑</el-button
      >
      <span class="editspan">({{ item.sortNum }})</span>
    </div>
    <!-- 新增弹窗 -->
    <dialogAdd
      v-if="dialogAddData.isShow"
      :dialog-add-data="dialogAddData"
      @refresh="refresh"
    ></dialogAdd>
  </div>
</template>

<script>
import { getSearchList } from '@/api/appSetting/contentTag' // 接口
import topSearch from '@component/appSetting/contentTags/topSearch' // 上部搜索条件
import dialogAdd from '@component/appSetting/contentTags/createTag' // 编辑弹窗
export default {
  name: 'set',
  msg: '频道设置',
  components: {
    topSearch,
    dialogAdd
  },
  data() {
    return {
      loading: true,
      isEditShow: false,
      id: '',
      formInline: {
        // 搜索条件
        name: '' // 标签名称
      },
      tagsList: [],
      // 新增
      dialogAddData: {
        isShow: false, // 默认隐藏
        type: 'add', // 默认新增
        id: null // 新增时，传递的参数
      },
      powerStr: 'system:contentTags:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  mounted() {
    this.searchList()
    // 获取权限
    // this.getPower()
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        }
      })
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = { ...this.formInline }
      getSearchList(
        obj,
        (response) => {
          this.loading = false
          this.tagsList = response.rows
          this.tagsList.filter((item) => {
            item.isEditShow = false
            if (item.name === '关注' || item.name === '推荐') {
              item.isEditShow = true
            }
          })
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    createTag(type, params = '') {
      this.dialogAddData.isShow = true
      this.dialogAddData.type = type
      this.dialogAddData.id = params
    },
    // 跳转分配用户页面
    handleLife(id, name) {
      let query = {
        name: name,
        id
      }
      this.$router.push({
        name: 'wh:appSetting:contentTags:lifeContents:lifeContentList',
        query: query
      })
    },
    /* 搜索 */
    toSearch() {
      this.searchList()
    },
    /* 新增编辑后，刷新列表 */
    refresh() {
      this.toSearch()
    }
  }
}
</script>

<style lang="less" scoped>
#channelSetList {
  .box {
    display: inline-block;
    .box-card-red {
      height: 100px;
      width: 200px;
      border-radius: 15px;
      margin-left: 30px !important;
      background: linear-gradient(90deg, #55bdbc, #5fc98c);
      cursor: pointer;
    }
    .box-card-green {
      height: 100px;
      width: 200px;
      border-radius: 15px;
      margin-left: 30px !important;
      background: linear-gradient(90deg, #ee8a82, #f2d3b7);
      cursor: pointer;
    }
    h4 {
      height: 30px;
      color: #fff;
      border-bottom: 1px solid #fff;
      font-size: 16px;
      font-weight: 600;
    }
    p {
      margin-top: 10px;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
    }
    .el-button {
      margin-left: 45px;
      font-size: 16px;
      font-weight: 600;
    }
    .editspan {
      margin-left: 20px;
      font-size: 16px;
    }
  }
}
</style>
